<template>
  <a-card v-show="isHeard">
    <Breadcrumb></Breadcrumb>
    <div class="ant-page-header-heading" v-if="title!=''">{{title}}</div>
    <div class="ant-page-header-content" v-if="content!=''">{{content}}</div>
  </a-card>
  <div class="ant-content">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {Prop} from "vue-property-decorator";
import Breadcrumb from "./Breadcrumb.vue";

@Options({
  components: {
    Breadcrumb
  },
})
export default class PageView extends Vue {
    @Prop()
    public title:string = "";
    @Prop({type: String})
    public content:string = "";
    @Prop()
    public isHeard:boolean = false;
}
</script>
<style lang="less">
.ant-page-header-heading{
  margin-top:8px;
  font-weight:600;
  font-size:20px;
  line-height:32px;
  color: #000;
}
.ant-content{
  margin: 24px 24px 0;
}
// .ant-page-header-content{
//   margin-top: 12px;
// }
</style>